<template>
  <div class="custom-table-list-wrapper">
    <div class="search" :class="{ active: toggleSearchStatus }">
      <div class="search-left" ref="searchFromRef">
        <el-form class="search-form" inline>
          <el-form-item label="所属园区">
            <el-select
              class="search-select"
              v-model="searchParams.parkId"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) of parkOptions"
                :key="index"
                :label="item.name"
                :value="item.pkid"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="检查场景">
            <el-select
              class="search-select"
              v-model="searchParams.senceId"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) of dict['inspection_inspection_scene']"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="整改对象">
            <el-select
              class="search-select"
              v-model="searchParams.repairCompany"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) of dict['special_task_publish_scope']"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="整改部门">
            <el-select
              class="search-select"
              v-model="searchParams.status"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) of statusOptions"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item label="整改状态">
            <el-select
              class="search-select"
              v-model="searchParams.status"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) of dict['rectification_status']"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="关键词">
            <el-input
              class="search-input"
              v-model="searchParams.keyword"
              placeholder="请输入检查点名称"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
        <a
          class="search-left-toggle"
          v-if="showToggle"
          @click="handleToggleSearch"
        >
          <svg-icon :name="toggleSearchStatus ? 'up' : 'down'" />
          {{ toggleSearchStatus ? '收起' : '展开' }}
        </a>
      </div>
      <div class="search-right">
        <el-button type="primary" @click="initTableList(1)">
          <svg-icon name="search" size="14px" />
          搜索
        </el-button>
        <el-button @click="handleReset()">
          <svg-icon name="reset" size="17px" />
          重置
        </el-button>
      </div>
    </div>
    <div class="content">
      <div class="content-operate">
        <el-button type="primary" @click="handleRectify()">
          <svg-icon name="add" size="15px" />申请整改</el-button
        >
        <el-button type="primary" @click="handleExamine()"
          ><svg-icon name="add" size="15px" />审批</el-button
        >
        <el-button type="primary" @click="handleInspection()"
          ><svg-icon name="add" size="15px" />申请巡检</el-button
        >
        <el-button type="primary" @click="handleNotice()"
          ><svg-icon name="add" size="15px" />下发通知</el-button
        >
        <!--        <el-button type="primary" @click="handleResult()"-->
        <!--          ><svg-icon name="add" size="15px" />结果确认</el-button-->
        <!--        >-->
      </div>
      <div class="content-table">
        <el-table
          class="custom-table"
          :data="tableData"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="60px" fixed="left" />
          <el-table-column
            type="index"
            label="序号"
            width="60px"
            fixed="left"
          />
          <el-table-column prop="pointName" label="检查点" fixed="left" />
          <el-table-column prop="appDesc" label="隐患描述" fixed="left">
            <template #default="scope">
              {{ scope.row.repairDesc || scope.row.appDesc }}
            </template>
          </el-table-column>
          <el-table-column label="隐患图片" fixed="left">
            <template #default="scope">
              <template v-if="scope.row.dangerImgFile">
                <el-image
                  :preview-src-list="[scope.row.dangerImgFile.fileUrl]"
                  :src="scope.row.dangerImgFile.fileUrl"
                  class="table-img"
                  fit="cover"
                  preview-teleported
                />
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="parkName" label="所属园区" />
          <el-table-column prop="senceName" label="检查场景" />
          <el-table-column prop="repairMethod" label="整改措施" />
          <el-table-column prop="name" label="整改对象">
            <template #default="scope">
              {{
                getDictValue(
                  'special_task_publish_scope',
                  scope.row.repairCompany,
                )
              }}
            </template>
          </el-table-column>
          <el-table-column prop="repairDeptName" label="整改部门" />
          <el-table-column prop="dutyPersonName" label="责任人" />
          <el-table-column prop="deadLine" label="整改期限" />
          <el-table-column prop="cost" label="费用(元)" />
          <el-table-column prop="name" label="整改后照片">
            <template #default="scope">
              <!-- <el-image
                class="table-img"
                fit="cover"
                :preview-src-list="[scope.row.fileUrl]"
                preview-teleported
                :src="scope.row.fileUrl"
              /> -->
            </template>
          </el-table-column>
          <el-table-column prop="name" label="未整改原因" />
          <el-table-column label="确认人" prop="checkPersonName" />
          <!--          <el-table-column prop="checkTime" label="完成时间" />-->
          <el-table-column prop="checkTime" label="检查时间" />
          <!-- <el-table-column prop="name" label="检查内容" />
          <el-table-column prop="name" label="数据来源" /> -->
          <el-table-column prop="time" label="整改状态" fixed="right">
            <template #default="scope">
              <el-tag
                :type="getDictStyle('rectification_status', scope.row.status)"
                >{{
                  getDictValue('rectification_status', scope.row.status)
                }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px" fixed="right">
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="
                  handleDetail(
                    { pkid: scope.row.pkid },
                    'rectificationManageDetail',
                    true,
                  )
                "
                >详情
              </el-button>
              <el-button
                v-if="scope.row.status === '1'"
                link
                type="primary"
                @click="handleRectify(scope.row)"
                >申请整改</el-button
              >
              <el-button
                v-if="scope.row.status === '2'"
                link
                type="primary"
                @click="handleExamine(scope.row)"
                >审批</el-button
              >
              <el-button
                v-if="scope.row.status === '3'"
                link
                type="primary"
                @click="handleInspection(scope.row)"
                >申请巡检</el-button
              >
              <el-button
                v-if="scope.row.status === '4'"
                link
                type="primary"
                @click="handleNotice(scope.row)"
                >下发通知</el-button
              >
              <el-button
                v-if="scope.row.status === '6'"
                link
                type="primary"
                @click="handleResult(scope.row)"
                >结果确认</el-button
              >
              <el-button
                v-if="scope.row.status === '1'"
                link
                type="danger"
                @click="handleEnd(scope.row)"
                >关闭</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="content-page">
        <el-pagination
          class="custom-pagination"
          :current-page="paginationParams.pageIndex"
          :page-size="paginationParams.pageSize"
          background
          :page-sizes="[10, 20, 30, 50]"
          layout="total, prev, pager, next, sizes, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="initTableList"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useTableList } from '@/hooks/useTableList'
import { ElMessage, ElMessageBox } from 'element-plus'
import { parkPageList } from '@/api/manager/dataManage/park'
import { useRoute, useRouter } from 'vue-router'
import {
  dangerClose,
  getDangerList,
} from '@/api/manager/inspectionManage/rectificationManage.js'
import { useDict } from '@/hooks/useDict'

const { dict, getDictValue, getDictStyle } = useDict([
  'rectification_status',
  'inspection_inspection_scene',
  'special_task_publish_scope',
])

const router = useRouter()
const route = useRoute()

const searchParams = ref({})
const {
  Search,
  toggleSearchStatus,
  showToggle,
  handleToggleSearch,
  tableData,
  paginationParams,
  total,
  initTableList,
  handleSizeChange,
  handleReset,
  handleDelete,
  currentDetail,
  addRef,
  detailRef,
  handleAdd,
  handleEdit,
  handleDetail,
  handleClose,
  searchFromRef,
} = useTableList(searchParams, getDangerList)

const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const rectifyDialogRef = ref()
const handleRectify = (row) => {
  let arr = []
  if (row) {
    arr = [row]
  } else {
    arr = [...multipleSelection.value]
  }
  if (arr.length === 0) {
    ElMessage.warning('请先勾选隐患')
    return
  }
  let isAllPass = true
  arr.forEach((item) => {
    if (item.status !== '1') {
      isAllPass = false
    }
  })
  if (!isAllPass) {
    ElMessage.warning('只可勾选状态为“待申请”的隐患')
    return
  }
  const pkid = arr
    .map((i) => {
      return i.pkid
    })
    .join(',')
  router.push({ name: 'rectificationManageRectify', query: { pkid: pkid } })
}
const handleExamine = (row) => {
  let arr = []
  if (row) {
    arr = [row]
  } else {
    arr = [...multipleSelection.value]
  }
  if (arr.length === 0) {
    ElMessage.warning('请先勾选隐患')
    return
  }
  let isAllPass = true
  arr.forEach((item) => {
    if (item.status !== '2') {
      isAllPass = false
    }
  })
  if (!isAllPass) {
    ElMessage.warning('只可勾选状态为“待审批”的隐患')
    return
  }
  const pkid = arr
    .map((i) => {
      return i.pkid
    })
    .join(',')
  router.push({ name: 'rectificationManageExamine', query: { pkid: pkid } })
}
const handleInspection = (row) => {
  let arr = []
  if (row) {
    arr = [row]
  } else {
    arr = [...multipleSelection.value]
  }
  if (arr.length === 0) {
    ElMessage.warning('请先勾选隐患')
    return
  }
  let isAllPass = true
  arr.forEach((item) => {
    if (item.status !== '3') {
      isAllPass = false
    }
  })
  if (!isAllPass) {
    ElMessage.warning('只可勾选状态为“待下发”的隐患')
    return
  }
  const pkid = arr
    .map((i) => {
      return i.pkid
    })
    .join(',')
  const repairIds = arr
    .map((i) => {
      return i.repairId
    })
    .join(',')
  router.push({
    name: 'planManageEdit',
    query: { dangerIds: pkid, review: '1', repairIds: repairIds },
  })
}
const handleNotice = (row) => {
  let arr = []
  if (row) {
    arr = [row]
  } else {
    arr = [...multipleSelection.value]
  }
  if (arr.length === 0) {
    ElMessage.warning('请先勾选隐患')
    return
  }
  let isAllPass = true
  arr.forEach((item) => {
    if (item.status !== '4') {
      isAllPass = false
    }
  })
  if (!isAllPass) {
    ElMessage.warning('只可勾选状态为“待签收”的隐患')
    return
  }
  const pkid = arr
    .map((i) => {
      return i.pkid
    })
    .join(',')
  router.push({ name: 'specialManageAdd', query: { dangerIds: pkid } })
}
const handleResult = (row) => {
  let arr = []
  if (row) {
    arr = [row]
  } else {
    arr = [...multipleSelection.value]
  }
  if (arr.length === 0) {
    ElMessage.warning('请先勾选隐患')
    return
  }
  let isAllPass = true
  arr.forEach((item) => {
    if (item.status !== '6') {
      isAllPass = false
    }
  })
  if (!isAllPass) {
    ElMessage.warning('只可勾选状态为“待确认”的隐患')
    return
  }
  const pkid = arr
    .map((i) => {
      return i.pkid
    })
    .join(',')
  const repairIds = arr
    .map((i) => {
      return i.repairId
    })
    .join(',')
  router.push({
    name: 'rectificationManageResult',
    query: { pkid: pkid, repairIds: repairIds },
  })
}
const handleEnd = (row) => {
  ElMessageBox.confirm('是否确定关闭该项？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const params = { pkid: row.pkid }
      const res = await dangerClose(params)
      if (res.success) {
        ElMessage({
          type: 'success',
          message: '关闭成功',
        })
        initTableList(1)
      } else {
        ElMessage.error(res.message)
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}

const parkOptions = ref([])
const initParkOptions = async () => {
  const res = await parkPageList({ pageIndex: 1, pageSize: 9999, enable: '1' })
  parkOptions.value = res.data.list
}
onMounted(() => {
  initTableList(1)
  initParkOptions()
})
</script>
<style lang="scss" scoped>
@import '@/assets/styles/table.scss';
.content-operate {
  justify-content: flex-start;
}
.table-img {
  width: 60px;
  height: 60px;
}
</style>
